<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="breadNav" style="margin: 20px 0 20px 20px;">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-home">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened" :to="{ path: '/stateAdmin' }"><a href="/">积分商城</a></el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-folder-opened">状态管理</el-breadcrumb-item>
        </el-breadcrumb>  
      </div>
      
    <!-- 导航栏 -->
    <el-tabs v-model="activeName" >
    <el-tab-pane label="全部商品" name="first">
      <div class="x_goodsTable">
      <div>
        <el-row>
          <el-col :span="24">
            <ul class="x_goodsTableThead">
              <li>商品</li>
              <li>卖家</li>
              <li>支付/配送</li>
              <li>价格</li>
              <li>操作</li>
              <li>状态</li>
            </ul>
            <ul class="x_shopping">
              <li>商城</li>
              <li class="x_date">
                <b>2022-10-11</b>
              </li>
              <li class="x_time">14:21:46</li>
              <li class="x_gcode">订单编号:</li>
            </ul>
            <ul class="x_shop" v-for="items in datas" :key="items.id">
              <li>
                <img src="" alt="">
                <span>{{items.imgText}}</span>
              </li>
              <li>{{items.saler}}<br/>1000</li>
              <li>{{items.payment}}<br/>快递</li>
              <li>{{items.priceTag}}</li>
              <li @click="checkDetail" style="color:blue;cursor:pointer">{{items.ecual}}</li>
              <li>{{items.cateStatus}}</li>
            </ul>
          </el-col>
        </el-row>
      </div>
      
    </div>
    </el-tab-pane>
    <el-tab-pane label="已付款" name="second">
      <detail></detail>
    </el-tab-pane>
    <el-tab-pane label="已发货" name="third">
      <sendCheck></sendCheck>
    </el-tab-pane>
    <el-tab-pane label="已收货" name="fourth">
    <Delivery></Delivery>
    </el-tab-pane>
  </el-tabs>
    <div class="line" ></div>
    <!-- 商品table -->
   
  </div>
</template>

<script>
import {getStatusApi} from '../../../api'
import sendCheck from './sendCheck.vue';
import detail from './detail.vue';
import Delivery from './delivery.vue';

export default {
  data() {
        return {
          // 导航栏
          activeIndex: '1',
          activeName: 'first',
          datas:[],
        };
      },
      created() {
        getStatusApi().then(res => {
          console.log(res)
          this.datas = res.data
        })
      },
      methods: {
        // 导航栏
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        // 商品信息表头
        handleClick(tab, event) {
          console.log(tab, event);
        },
        checkDetail() {
          this.$router.push('/xdetail')
        },
        
      },
      components:{
        sendCheck,
        detail,
        Delivery,
      }
}
</script>

<style lang="scss" scoped>
.el-menu {background:none;} 
.goods_list{margin-left:20px;}
.x_button {margin:50px 30px;}
.x_goodsTable{
  width:1000px;
  margin:50px auto;
  .x_goodsTableThead{
    background:rgb(240, 240, 240);
    height:30px;
    width:100%;
    display:flex;
    justify-content: space-around;
    li{
      font-size:17px;
      font-weight:bold;
      margin-left:20px;
      
    }
  }
}
.x_shopping{
  display:flex;
  height:30px;
  background:rgb(240, 240, 240);
  margin-top:15px;
  border:1px solid lightgray;
  li{
    margin-left:30px;
    line-height:30px;
  }
  li:first-child {
    border:1px solid rgb(102, 102, 238);
    color:rgb(102, 102, 238);
    width:70px;
    text-align:center;
  }
}
.x_shop{
  display:flex;
  height:40px;
  margin-top:40px;
  justify-content: space-around;
  li{
    line-height:40px;
    font-size:14px;
  }
}
</style>